<template>
  <view class="container">
    <view class="upload-page">
      <view class="upload-title">图片框选工具</view>
      <view class="upload-subtitle">选择图片开始框选标注</view>

      <view class="upload-area" @tap="chooseImage">
        <view class="upload-icon">📷</view>
        <view class="upload-text">点击上传图片</view>
        <view class="upload-hint">支持 JPG、PNG、JPEG、WEBP 格式</view>
      </view>

      <button class="upload-btn" @tap="chooseImage">从相册选择</button>

      <!-- 演示链接 -->
      <view class="demo-link">
        <text class="demo-text" @tap="goToDemo">查看组件演示</text>
      </view>

      <!-- 预览选中的图片 -->
      <view v-if="selectedImage" class="preview-section">
        <view class="preview-title">已选择图片</view>
        <image :src="selectedImage" class="preview-image" mode="aspectFit" />
        <button class="start-btn" @tap="startSelection">开始框选</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      selectedImage: "",
      initialCoordinates: [
        // 示例初始坐标
        {
          id: "box1",
          x: 50,
          y: 50,
          width: 300,
          height: 238,
        },
        {
          id: "box2",
          x: 480,
          y: 50,
          width: 400,
          height: 500,
        },
      ],
    };
  },
  methods: {
    // 选择图片
    chooseImage() {
      uni.chooseImage({
        count: 1,
        sizeType: ["original", "compressed"],
        sourceType: ["album", "camera"],
        success: (res) => {
          const tempPath = res.tempFilePaths[0];
          console.log("选中图片:", tempPath);

          // H5平台需要特殊处理
          // #ifdef H5
          this.convertImageToBase64(tempPath);
          // #endif

          // 非H5平台直接使用
          // #ifndef H5
          this.selectedImage = tempPath;
          // #endif
        },
        fail: (err) => {
          console.error("选择图片失败:", err);
          uni.showToast({
            title: "选择图片失败",
            icon: "error",
          });
        },
      });
    },

    // 将图片转换为base64 (H5平台使用)
    convertImageToBase64(imagePath) {
      // 创建canvas来转换图片
      const canvas = document.createElement("canvas");
      const ctx = canvas.getContext("2d");
      const img = new Image();

      img.crossOrigin = "anonymous";
      img.onload = () => {
        // 设置canvas尺寸
        canvas.width = img.naturalWidth;
        canvas.height = img.naturalHeight;

        // 绘制图片到canvas
        ctx.drawImage(img, 0, 0);

        // 转换为base64
        const base64 = canvas.toDataURL("image/jpeg", 0.8);
        this.selectedImage = base64;

        console.log("图片已转换为base64");
      };

      img.onerror = (error) => {
        console.error("图片加载失败:", error);
        uni.showToast({
          title: "图片处理失败",
          icon: "error",
        });
      };

      img.src = imagePath;
    },

    // 开始框选
    startSelection() {
      if (!this.selectedImage) {
        uni.showToast({
          title: "请先选择图片",
          icon: "error",
        });
        return;
      }

      // 跳转到框选页面，传递图片和初始坐标
      uni.navigateTo({
        url: `/pages/selector/selector?image=${encodeURIComponent(
          this.selectedImage
        )}&coordinates=${encodeURIComponent(
          JSON.stringify(this.initialCoordinates)
        )}`,
      });
    },

    // 跳转到演示页面
    goToDemo() {
      uni.navigateTo({
        url: "/pages/demo/demo",
      });
    },
  },
};
</script>

<style scoped>
.container {
  min-height: 100vh;
  background: #1a1a1a;
  color: #ffffff;
}

.upload-page {
  padding: 40px 20px;
  text-align: center;
}

.upload-title {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 12px;
  color: #ffffff;
}

.upload-subtitle {
  font-size: 16px;
  color: #8e8e93;
  margin-bottom: 40px;
}

.upload-area {
  border: 2px dashed #3a3a3c;
  border-radius: 12px;
  padding: 60px 20px;
  margin-bottom: 30px;
  background: #2c2c2c;
  transition: all 0.3s ease;
}

.upload-area:active {
  border-color: #007aff;
  background: rgba(0, 122, 255, 0.05);
}

.upload-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  background: #007aff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
}

.upload-text {
  font-size: 18px;
  color: #ffffff;
  margin-bottom: 8px;
}

.upload-hint {
  font-size: 14px;
  color: #8e8e93;
}

.upload-btn {
  background: #007aff;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 14px 32px;
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 20px;
}

.upload-btn:active {
  background: #0056b3;
  transform: translateY(1px);
}

.preview-section {
  margin-top: 30px;
  padding: 20px;
  background: #2c2c2c;
  border-radius: 12px;
}

.preview-title {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 15px;
  color: #ffffff;
}

.preview-image {
  width: 100%;
  max-height: 300px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.start-btn {
  background: #00ff88;
  color: #000000;
  border: none;
  border-radius: 8px;
  padding: 14px 32px;
  font-size: 16px;
  font-weight: 600;
}

.start-btn:active {
  background: #00cc6a;
  transform: translateY(1px);
}

.demo-link {
  margin: 20px 0;
}

.demo-text {
  color: #007aff;
  font-size: 16px;
  text-decoration: underline;
}

.demo-text:active {
  color: #0056b3;
}

/* 响应式设计 */
@media (max-width: 414px) {
  .upload-page {
    padding: 30px 15px;
  }

  .upload-area {
    padding: 40px 15px;
  }

  .upload-icon {
    width: 56px;
    height: 56px;
    font-size: 24px;
  }
}
</style>
